import React, { useEffect } from 'react';
import styles from './Mask.less';

export default function (props:any) {

  let tempTop = 0;

  const stopEvent = (e:any) => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    stopBodyScroll(false);
    props.onClick && props.onClick();
  }

  function stopBodyScroll(isFixed: boolean) {
    let bodyEl = document.body
    if (isFixed) {
      tempTop = window.scrollY;
      bodyEl.style.position = 'fixed';
      bodyEl.style.top = -top + 'px';
    } else {
      bodyEl.style.position = '';
      bodyEl.style.top = '';
      window.scrollTo(0, tempTop) // 回到原先的top
    }
  }

  useEffect(() => {
    stopBodyScroll(true);
    return ()=>{
      stopBodyScroll(false);
    }
  }, [])

  return <div onClick={stopEvent} className={styles.mask_wrap}></div>
}